<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_动画操作-动画关键字</title>
  <!-- 
  在 jQuery 中，动画操作是实现页面动态效果的重要部分。jQuery 提供了一些关键字和方法来创建和控制动画效果。
  一、动画关键字
   1.  show() 
  show()  方法用于显示隐藏的元素，通常与  hide()  方法结合使用。
  $('#myElement').hide();  // 隐藏元素
  $('#myElement').show();  // 显示元素
   2.  hide() 

  hide()  方法用于隐藏匹配的元素。
  $('#myElement').hide();  // 隐藏元素
   3.  toggle() 
  toggle()  方法用于切换元素的可见性。如果元素是可见的，则隐藏它；如果元素是隐藏的，则显示它。
  $('#myElement').toggle();  // 切换元素的显示状态
   4.  fadeIn() 
  fadeIn()  方法用于以淡入的效果显示元素。
  $('#myElement').fadeIn();  // 以淡入效果显示元素
   5.  fadeOut() 
  fadeOut()  方法用于以淡出的效果隐藏元素。
  $('#myElement').fadeOut();  // 以淡出效果隐藏元素
   6.  fadeToggle() 
  fadeToggle()  方法用于切换元素的可见性，并带有淡入淡出的效果。
  $('#myElement').fadeToggle();  // 切换元素的显示状态，带有淡入淡出效果
   7.  slideDown() 
  slideDown()  方法用于以滑动的效果显示元素。
  $('#myElement').slideDown();  // 以滑动效果显示元素
   8.  slideUp() 
  slideUp()  方法用于以滑动的效果隐藏元素。
  $('#myElement').slideUp();  // 以滑动效果隐藏元素
   9.  slideToggle() 
  slideToggle()  方法用于切换元素的可见性，并带有滑动的效果。
  $('#myElement').slideToggle();  // 切换元素的显示状态，带有滑动效果
   10.  animate() 
  animate()  方法用于自定义动画效果，可以对多个 CSS 属性进行动画处理。
  $('#myElement').animate({
      opacity: 0.5,  // 设置透明度
      left: '100px'  // 设置左边距
  }, 1000);  // 动画持续时间为 1000 毫秒

  二、总结
  -  show()  和  hide() ：用于显示和隐藏元素。
  -  toggle() ：用于切换元素的可见性。
  -  fadeIn() 、 fadeOut()  和  fadeToggle() ：用于淡入、淡出和切换显示状态。
  -  slideDown() 、 slideUp()  和  slideToggle() ：用于滑动显示、隐藏和切换状态。
  -  animate() ：用于自定义动画效果，支持对多个 CSS 属性进行动画处理。
  -->
</head>
<body>

  <button class="show">显示</button>
  <button class="hide">隐藏</button>
  <button class="toggle">切换</button>

  <div class="animation-box">animation-box</div>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    $(function() {
      let $box = $('.animation-box')
      // $('.hide').click(function() {
      //   // 需要一个隐藏的动画
      //   $('.box').animate({
      //     opacity: 'toggle',
      //     // height: 0,  // number
      //     // height: '0',  // string
      //     // height: '100%',  // 百分比  50% -> 100% ; 100px -> 200px
      //     // height: 'toggle' // 关键字: show  hide  toggle(切换)
      //     // height: '-=40px' // 100px -> 60px
      //   }, 4000, 'swing' , function() {
      //     console.log('动画执行完毕之后会回调')
      //   })
      // })

      $box.css({
        width: '200px',
        height: '200px',
        background: 'pink',
      })

      $('.hide').click(function() {
        $box.hide('slow', function() {
          console.log('动画执行完成')
        })
      })

      $('.show').click(function() {
        $box.show('fast', function() {
          console.log('动画执行完成')
        })
      })
     
      $('.toggle').click(function() {
        $box.animate({
          opacity: 'toggle',
          height: 'toggle',
          width: 'toggle'
        }, 2000, function() {
          console.log('动画执行完成')
        })
      })
    })

  </script>
  
</body>
</html>